<template>
<div class="commentBox">
    <div class="commentTop">
        <div class="commentUser">
            <div class="avager">
                <img :src="audioDetail.imgUrl" />
            </div>
            <div class="commentTopContent">
                <div class="comment">{{audioDetail.title || '好先生和皓先生'}}</div>
                <div class="commentText">
                  {{audioDetail.desc || '好先生和皓先生'}}
                </div>
                <span @click="moreBtn">更多》</span>
            </div>
        </div>
    </div>
    <div class="commentBottom">
        <div class="commentTitle">
            评论
            <span>（{{totalRow}}）</span>
        </div>
        <div class="wrapper">
            <scroller :on-infinite="infinite" ref="myscroller" class="scroll">
                <ul>
                    <li class="item" v-for="(item,index) in ReplyingPersonList" :key="index" @click="goDetail(item.id)">
                        <div class="itemLeft">
                            <img :src="item.portrait.indexOf('http') != -1 ? item.portrait : item.portrait" />
                        </div>
                        <div class="itemRight">
                            <div class="itemRightTop">
                                <div class="userName">
                                    <div>{{item.nick}}</div>
                                    <div>{{item.createTime}}</div>
                                </div>
                                <div class="loveIcon">
                                    <div class="imageBox" @click.stop="collectBtn(item.id,item.userId)">
                                        <img :src="item.select?'https://youyang-cdn.mdshuzhi.com/upload/icon_like_new@2x.png':'https://youyang-cdn.mdshuzhi.com/upload/icon_collect@2x.png'" />
                                    </div>
                                    <div class="loveText">{{item.likeNums}}</div>
                                </div>
                            </div>
                            <div class="itemRightMiddle" @click.stop="focusButn(item.nick,item.id,item.userId)">{{item.content}}</div>
                            <div class="itemRightBootom" v-if="item.subCommentList.list.length > 0">
                                <div class="otherComment">
                                    <div v-for="(list,index2) in item.subCommentList.list" :key="index2">
                                        <div class="otherItem" @click.stop="focusButn(item.nick,item.id,item.userId)">
                                            <span>{{list.nick}}：</span>
                                            <span>{{list.content}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="showDataNums" v-if="!item.subCommentList.lastPage" @click.stop="moreComment(index,item.id,item.subCommentList.pageNumber)">
                                    <!-- <router-link
                  :to="'/CommentDetail?id='+item.id+'&bodyId='+audioDetail.baseData.id+'&type='+options.type"
                    >查看{{item.subCommentpx.totalRow}}条回复</router-link>-->
                                    <div>查看{{item.subCommentList.totalRow-3}}条回复</div>
                                    <span class="rowBox"></span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </scroller>
        </div>
    </div>
    <!-- 评论输入框 -->
    <div class="inputBox" :style="'bottom:'+inputBottom+'px'">
        <!-- 注意点：1.style='bottom:{{inputBottom}}px'单位用px
      2.input的 adjust-position='{{false}}'要用false-->
        <input type="text" class="textInput" v-model="content" @keyup.13="submit" :placeholder="placeholder" @input="getInputText" @focus="foucus" ref="input" :focus="focusInput" @blur="blur" @confirm="submit" :adjustPosition="false" />
        <input type="submit" value="发送" class="btnInput" @click="submit"></input>
    </div>
    <!-- 列表弹出窗 -->
    <transition name="fade">
        <div class="listShadow" :style="{background:isShowPicker?'rgba(0, 0, 0, 0.32)':''}" v-show="isShowPicker" @click="isShowPicker && cancleBtn()">
            <div class="showList">
                <!-- 线条 -->
                <div class="topLineBox">
                    <span class="line"></span>
                </div>
                <!-- 弹出窗内容区 -->
                <div class="contentBox">
                    <!-- 音频简介 0-->
                    <div class="AudioIntroduction">
                        <span>{{audioDetail.title}}简介</span>
                        <!-- <span>{{audioDetail.baseData.title}}简介</span> -->
                        <div class="contentWord">
                            <scroller ref="myscrollerWord" class="scrollIntro">{{audioDetail.desc}}</scroller>
                        </div>
                    </div>
                </div>
                <!-- 收起 -->
                <div @click="cancleBtn" class="cancleBtn">收起</div>
            </div>
        </div>
    </transition>
</div>
</template>

<script>
import controller from "@/components/controllers/controllers";
import {
    getBeforeTime
} from "@/utils/filters";
import {
    Toast,
    MessageBox
} from "mint-ui";
import url from "@/router/http_conf.js"
export default {
    name: "",
    components: {},
    data() {
        return {
            isShowPicker: false, //弹出窗显示
            loveIconId: null, //点击点赞爱心按钮
            inputBottom: 0, //用于输入框能键盘弹出使得布局上移
            content: "", //输入框内容,
            focusInput: false,
            rid: null, //关联id :评论的对象id
            bodyType: null,
            type: null, //1是栏目，2是合辑，3是音频，4是达人榜，5是评论
            bodyId: null, //表示评论的对象，具体是1是栏目，2是合辑，3是音频的id,当是一级评论则rid = bodyId
            audioDetail: {}, //音频，栏目，详情
            options: {}, //页面参数
            ReplyingPersonList: [], //评论回复信息
            pageNumber: 1,
            lastPage: null,
            totalRow: 0,
            toUserId: "",
            collectId: null, //检测点赞收藏返回来的id
            placeholder: "说点什么…",
            timer: null,
            imgUrl: url
        };
    },
    created() {
        window.addEventListener('mousewheel',this.handleScroll);
        this.bodyType = this.$route.query.type;
        this.type = this.$route.query.type;
        this.bodyId = this.$route.query.rid;
        this.rid = this.$route.query.rid;
        if (this.bodyType == 1) {
            this.getCategoryDetail(this.rid);
        } else if (this.bodyType == 2) {
            this.getCompilationDetail(this.rid);
        } else if (this.bodyType == 3) {
            this.getAudioDetail(this.rid);
        }
        this.getCommentList();
    },
    destroyed(){
      window.removeEventListener('mousewheel',this.handleScroll)
    },
    methods: {
        handleScroll(e){
          let that = this  //此this指向的是vue
          console.log(e.wheelDelta)
          if (e.wheelDelta < 0) {
              that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, 50, true));
          } else {
            that.$refs.myscroller && (that.$refs.myscroller.scrollBy(0, -50, true));
          }
        },
        goDetail(id){
            this.$router.push({
                path:'/CommentDetail?id='+id+'&bodyId='+this.audioDetail.id+'&type='+this.bodyType
            })
        },
        //   更多
        moreBtn() {
            this.isShowPicker = !this.isShowPicker;
            this.shadowContentId = 0;
            console.log("更多");
        },
        // 点赞方法
        collectBtn(id, userId) {
            let that = this;
            let ReplyingPersonList = this.ReplyingPersonList;
            let flag = null;
            ReplyingPersonList.map(item => {

                if (item.id == id) {
                    // console.log(item.id, e.currentTarget.dataset.id)
                    item.select = item.select ? false : true
                    flag = item.select ? false : true
                    item.likeNums = flag ? item.likeNums - 1 : item.likeNums + 1
                }
            })
            this.ReplyingPersonList = ReplyingPersonList
            // 检测当前评论是否传回id
            that.checkCollect(id)
            console.log('flag', flag)
            if (that.timer) {
                clearTimeout(that.timer)
            }
            that.timer = setTimeout(() => {
                if (!flag) {
                    that.collectfn(id, userId)
                } else {
                    that.delCollectfn(id)
                }

            }, 300)

        },
        //评论他人评论
        focusButn(name, id, userId) {
            this.$refs.input.focus();
            this.placeholder = "回复" + name;
            this.type = 5
            this.bodyId = id
            this.toUserId = userId
        },
        getInputText() {},
        foucus(e) {
            console.log("对焦了");
        },
        //失去焦点
        blur() {
            console.log("失去焦点");
            this.placeholder = "说点什么…";
            this.type = null
            this.bodyId = this.rid
        },
        //提交评论
        submit() {
            console.log("提交");
            let params
            let _self = this
            if (this.type == 5) {
                params = {
                    content: this.content,
                    rid: this.bodyId,
                    bodyId: this.rid,
                    type: this.type, //评论对象的类型，1是栏目，2是合辑，3是音频，4是评论
                    bodyType: this.bodyType, //1是栏目，2是合辑，3是音频，4是达人榜
                    toUserId: this.toUserId
                }
            } else {
                params = {
                    content: this.content,
                    rid: this.bodyId,
                    bodyId: this.rid,
                    type: this.bodyType, //评论对象的类型，1是栏目，2是合辑，3是音频，4是评论
                    bodyType: this.bodyType, //1是栏目，2是合辑，3是音频，4是达人榜
                }
            }
            if (this.content == "") {
                Toast("请输入评论内容")
            } else {
                controller.comment(params)
                    .then(res => {
                        console.log('评论发送', res)
                        Toast("评论成功")
                        _self.$updateScore(8)
                        _self.content = ""
                        _self.pageNumber = 1
                        _self.lastPage = false
                        _self.ReplyingPersonList = [];
                        _self.getCommentList()
                    })
            }
        },
        cancleBtn() {
            this.isShowPicker = false;
        },
        // 上拉加载
        infinite(done) {
          setTimeout(() => {
            if (this.lastPage) {
              console.log('this.lastPage',this.lastPage);
              this.$refs.myscroller.resize();
              this.$refs.myscroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
            } else {
              console.log("进行下一次加载操作");
              this.lastPage = true;
              done(); //进行下一次加载操作
              this.pageNumber += 1;
              this.getCommentList();
            }
          }, 1500);
        },
        // 音频详情 -- 3
        getAudioDetail(audioId) {
            let _self = this;
            controller
                .audioDetail({
                    audioId,
                    token: localStorage.getItem("token"),
                })
                .then((res) => {
                    console.log("音频详情", res);
                    _self.audioDetail = res.baseData;
                });
        },
        // 合辑详情 -- 2
        getCompilationDetail(compilationId) {
            let _self = this;
            controller
                .compilationDetail({
                    compilationId,
                    token: localStorage.getItem("token"),
                })
                .then((res) => {
                    console.log("合辑详情", res);
                    _self.audioDetail = res.baseData;
                });
        },
        // 栏目详情 -- 1
        getCategoryDetail(categoryId) {
            let _self = this;
            controller
                .categoryDetail({
                    categoryId,
                    token: localStorage.getItem("token"),
                })
                .then((res) => {
                    console.log("栏目详情", res);
                    _self.audioDetail = res.baseData;
                });
        },
        // 评论回复人->评论列表 参数page pageSize rid（关联id） type=4
        getCommentList() {
            let _self = this;
            let params = {
                page: this.pageNumber,
                pageSize: 10,
                rid: this.rid, //关联id(音频的id)
                type: this.bodyType, //评论对象的类型，1是栏目，2是合辑，3是音频，4是达人榜，5是评论
                token: localStorage.getItem("token"),
            };
            controller.commentList(params).then((res) => {
                console.log("评论列表", res);
                res.baseData.list.map((item) => {
                    item.select = item.liked == 1 ? true : false;
                    item.likeNums = item.likeCount;
                    item.createTime = getBeforeTime(item.createTime);
                });
                _self.ReplyingPersonList = _self.ReplyingPersonList.concat(
                    res.baseData.list
                );
                _self.lastPage = res.baseData.lastPage;
                _self.totalRow = res.baseData.totalRow;
            });
        },
        // 查看更多子评论
        moreComment(index, rid, page) {
            let _self = this;
            let params = {
                page: page + 1,
                pageSize: 3,
                rid: rid, //关联id(音频的id)
                type: 5, //评论对象的类型，1是栏目，2是合辑，3是音频，4是达人榜，5是评论
                token: localStorage.getItem("token"),
            };
            controller.commentList(params).then((res) => {
                console.log("评论列表", res);
                _self.ReplyingPersonList[index].subCommentList.pageNumber =
                    res.baseData.pageNumber;
                _self.ReplyingPersonList[index].subCommentList.lastPage =
                    res.baseData.lastPage;
                _self.ReplyingPersonList[index].subCommentList.totalRow -= 3;
                _self.ReplyingPersonList[
                    index
                ].subCommentList.list = _self.ReplyingPersonList[
                    index
                ].subCommentList.list.concat(res.baseData.list);
            });
        },
        // 检测是否点赞收藏
        checkCollect(rid) {
            let _self = this
            let flag = true
            controller.checkCollect({
                type: 5,
                rid,
                token: localStorage.getItem("token"),
            }).then((res) => {
                console.log(res);
                _self.collectId = res.baseData
            });
        },
        // 点赞收藏方法
        collectfn(rid, userId) {
            let that = this;
            let params = {
                rid: rid, //点赞的对象是评论，那rid就是对象的id
                bodyType: this.bodyType, //（主体类型）
                bodyId: this.rid, //音频（或者栏目，合辑等）的id
                toUserId: userId,
                type: 5,
                token: localStorage.getItem("token"),
            }
            controller.collect(params)
                .then(res => {
                    console.log('点赞方法', res)
                    that.checkCollect(rid)
                    that.$updateScore(9)
                })
        },
        // 取消收藏,点赞
        delCollectfn(rid) {
            let that = this;
            controller.delCollect({
                    ids: this.collectId,
                    token: localStorage.getItem("token"),
                })
                .then(res => {
                    that.checkCollect(rid)
                })
        },
    },
};
</script>

<style lang="scss" scoped>
.commentBox {
    // width: 750px;
    width: 100%;
    min-width: 640px;
    max-width: 960px;
    margin: 0 auto;

    /* 头部 */
    .commentTop {
        background-color: #f6f6fa;
        width: 100%;
        height: 168px;
        padding: 24px;
        box-sizing: border-box;

        .commentUser {
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;

            .avager {
                width: 120px;
                height: 120px;
                border-radius: 4px;
                overflow: hidden;
                margin-right: 17px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .commentTopContent {
                // width: 570px;
                width: 84%;
                height: 100%;
                position: relative;
                span {
                    color: #e66d4d;
                    font-size: 38px;
                    transform: scale(0.5) translate(50%,50%);
                    position: absolute;
                    right: -6px;
                    bottom: -4px;
                    display: inline-block;
                    background-color: #f6f6fa;
                }

                .comment {
                    font-size: 30px;
                    color: #333333;
                    margin-bottom: 5px;
                }

                .commentText {
                  max-height: 60px;
                  width: 100%;
                  max-height: 60px;
                  display: -webkit-box;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  /* ! autoprefixer: off */
                    -webkit-box-orient: vertical;
                  /* autoprefixer: on */
                  -webkit-line-clamp: 2;
                  line-height: 30px;
                  font-size: 24px;
                  color: #999999;
                  position: relative;
                  padding-right: 50px;
                  box-sizing: border-box;
                }
            }
        }
    }

    /* 评论区 */
    .commentBottom {
        width: 750px;
        padding: 32px 27px 98px;
        box-sizing: border-box;

        .commentTitle {
            font-size: 32px;
            color: #333333;
            margin-bottom: 32px;

            span {
                color: #a8acbb;
            }
        }

        .wrapper {
            width: 100%;
            .item {
                width: 100%;
                min-width: 640px;
                max-width: 960px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                margin-bottom: 33px;

                .itemLeft {
                    width: 12.5%;
                    // margin-right: 12px;
                    margin-right: 1.6%;

                    img {
                        // width: 58px;
                        // height: 58px;
                        width: 100%;
                        // height: ;
                        border-radius: 50%;
                    }
                }

                .itemRight {
                    // width: 628px;
                    flex: 1;

                    .itemRightTop {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .userName {
                            div:first-child {
                                font-size: 28px;
                                color: #333333;
                                margin-bottom: 10px;
                            }

                            div:last-child {
                                font-size: 20px;
                                color: #a8acbb;
                            }
                        }

                        .loveIcon {
                            width: 32px;
                            display: flex;
                            flex-direction: column;
                            align-items: center;

                            .imageBox,
                            .imageBox img {
                                width: 32px;
                                height: 32px;
                            }

                            .loveText {
                                color: #a8acbb;
                                font-size: 20px;
                            }
                        }
                    }

                    /* 评论内容 */
                    .itemRightMiddle {
                        width: 100%;
                        line-height: 46px;
                        font-size: 30px;
                        color: #333333;
                        margin: 30px 0 20px;
                    }

                    /* 他人评论 */
                    .itemRightBootom {
                        width: 100%;
                        padding: 23px 25px;
                        box-sizing: border-box;
                        background-color: #f6f6fa;

                        .otherComment .otherItem {
                            font-size: 26px;
                            line-height: 46px;
                            color: #e66d4d;

                            span:last-child {
                                width: 100%;
                                overflow: hidden;
                                white-space: normal;
                                word-break: break-all;
                                color: #434343;
                            }
                        }

                        .showDataNums {
                            font-size: 24px;
                            line-height: 46px;
                            color: #a8acbb;
                            display: flex;
                            align-items: center;
                        }
                    }
                }
            }
        }
    }
}

/*箭头*/
.rowBox {
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
    display: inline-block;
    border-top: 2px solid #a8acbb;
    border-right: 2px solid #a8acbb;
    margin-left: 12px;
}

/* 评论输入框 */
.inputBox {
    // width: 750px;
    width: 100%;
    min-width: 640px;
    max-width: 960px;
    height: 98px;
    background-color: #fff;
    z-index: 999;
    padding: 15px 24px;
    box-sizing: border-box;
    position: fixed;
    left: 50%;
    bottom: 0px;
    transform: translateX(-50%);
    box-shadow: 0 -1px 5px 1px rgba(0, 0, 0, 0.1);
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .textInput {
        width: 84%;
        height: 68px;
        background-color: #f5f5f5;
        border-radius: 34px;
        color: #999;
        font-size: 28px;
        padding-left: 31px;
        box-sizing: border-box;
        border: none;
    }
    .btnInput{
      width: 15%;
      height: 68px;
      padding: 10px 1%;
      background-color: #e66d4d;
      border-radius: 25px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      outline: none;
      border:0px;
      color: #FFFFFF;
      font-size: 28px;
    }
}

/* 列表弹出窗 */
.listShadow {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    z-index: 9999;
    min-width: 640px;
    max-width: 960px;
    margin: 0 auto;

    .showList {
        width: 750px;
        height: 80%;
        position: absolute;
        bottom: 0;
        border-radius: 32px 32px 0 0;
        background-color: #fff;
        z-index: 999;
        left: 50%;
        transform: translateX(-50%);

        .topLineBox {
            width: 100%;
            height: 57px;
            display: flex;
            justify-content: center;
            align-items: center;

            .line {
                display: inline-block;
                width: 120px;
                height: 6px;
                background-color: #ededed;
                border-radius: 3px;
            }
        }

        /* 收起按钮 */
        .cancleBtn {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 116px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 32px;
            color: #323232;
            text-align: center;
            border-top: 2px solid rgb(231, 231, 231);
            box-sizing: border-box;
            background-color: #fff;
        }

        /* 弹出窗内容区 */
        .contentBox {
            width: 750px;
            height: 82%;

            .AudioIntroduction {
                width: 750px;
                height: 100%;
                padding: 0 48px;
                box-sizing: border-box;

                span {
                    width: 100%;
                    display: inline-block;
                    text-align: center;
                    font-size: 36px;
                    color: #323232;
                    font-weight: Bold;
                }

                .contentWord {
                    font-size: 30px;
                    color: #323232;
                    margin-top: 44px;
                    line-height: 44px;
                    height: 90%;
                    position: relative;
                }
            }
        }
    }
}

.scroll{
  /deep/ &._v-container {
    top: 260px;
    height: calc(100vh - 260px) !important;
    padding: 0 25px;
    box-sizing: border-box;
    // height: auto !important;
    ._v-content{
      padding-bottom: 40px;
    }
  }
}


.scrollIntro {
    // margin-top: 130px !important;
    height: 90% !important;
    padding-bottom: 100px;
    box-sizing: border-box;
    /deep/ &._v-container {
      height: auto !important;
      ._v-content{
        padding-bottom: 40px;
      }
    }
}

// 弹出窗效果
@keyframes bounce-in {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0%);
    }
}

.fade-enter-active {
    transform-origin: left center;
    animation: bounce-in 0.5s;
}

.fade-leave-active {
    transform-origin: left center;
    animation: bounce-in 0.5s reverse;
}
</style>
